<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="选择套餐"
      :visible.sync="addPackageShow"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="1200px"
      top="40px"
      class="add"
      @close="closeAdd"
    >
      <el-form class="search ml20" :inline="true" label-suffix="：" size="mini" :model="search">
        <el-form-item label="套餐名称">
          <el-input v-model="search.packageName" clearable class="w150" placeholder="请输入套餐名称" />
        </el-form-item>
        <el-form-item label="套餐类型">
          <el-select v-model="search.types" clearable class="w150" multiple collapse-tags placeholder="请选择">
            <el-option v-for="item in options.types" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList('search')">确认
          </el-button>
          <el-button @click="searchReset">重置
          </el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="getList('search')">搜 索</el-button>
        </el-form-item> -->

      </el-form>
      <el-table
        :data="list"
        size="small"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
        @selection-change="handleSelectionChange"
      >
        <ElTableColumn type="selection" width="50" />
        <ElTableColumn label="套餐名称" prop="packageName" />
        <ElTableColumn label="套餐类型" prop="type" />
      </el-table>
      <pagination
        class="page tc mt10"
        :total="page.total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="selectGoods">确 定</el-button>
        <el-button size="small" @click="closeAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getActivityGoods } from '@/api/order';
import pagination from '@/components/Pagination';
import { drugcategoryList } from '@/api/drugs';
import { packageList } from '@/api/package';
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Search {
  packageName = '';
  statues = [2]
}
class Options {
  drugCategoryCode = [];
  types = [
    { id: 1, name: '理疗项目' },
    { id: 2, name: '治疗调理' }
  ];
}
export default {
  name: 'AddGoods',
  components: {
    pagination
  },
  props: {
    packageId: {
      type: Array,
      default() {
        return [];
      }
    },
    typeNam: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      search: new Search(), // 检索条件
      options: new Options(), // 选项
      page: new Page(), // 分页
      list: [],
      addPackageShow: true,
      optionProps: {
        value: 'drugCategoryCode',
        label: 'drugCategoryName',
        children: 'children',
        multiple: true,
        checkStrictly: true,
        emitPath: false
      }
    };
  },

  mounted() {
    this.getOptions();
    this.getList();
  },
  activated() { },
  methods: {
    async getOptions() {
      const res = await drugcategoryList({});
      this.options.drugCategoryCode = res.data.list;
    },
    async getList() {
      console.log(1111);
      try {
        const { data } = await packageList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          ...this.search
        });
        // console.log(data);
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    closeAdd() {
      this.$emit('closeAdd', false);
    },
    // 搜索重置
    searchReset() {
      this.search = new Search();
      this.getList();
    },
    // 改变表格选中状态
    handleSelectionChange(val) {
      this.idList = val.map(i => {
        return i;
      });
    },
    selectGoods() {
      this.$emit('goodsList', this.idList);
      this.closeAdd();
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  ::v-deep.el-dialog {
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  ::v-deep.el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
